<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>ShowMessage jQuery plug-in</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
</head>
<body>
	<script type="text/javascript" src="js/jquery.showMessage.min.js" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	//<![CDATA[
	jQuery(function() {
		jQuery('.header').click(function() {
			window.location='http://showMessage.dingobytes.com';
		});
		jQuery('input[type=submit]').click(function() {
			var emailFilter=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
			var phoneFilter = new RegExp("^(([0-9]{1})*[- .(]*([0-9a-zA-Z]{3})*[- .)]*[0-9a-zA-Z]{3}[- .]*[0-9a-zA-Z]{4})+$");
			var formData = jQuery('#contactForm').serializeArray();
			var errorMessage=[], elFocus;
			if( jQuery('input[name=fullName]').val() === '' )
			{
				errorMessage.push("Please enter your full name");
				if( typeof(elFocus) == 'undefined' )
				{
					elFocus=jQuery('input[name=fullName]');
				}
			}
			if( jQuery('input[name=phone]').val() !== '' && !phoneFilter.test(jQuery('input[name=phone]').val()) )
			{
				errorMessage.push("Please enter a valid phone number");
				if( typeof(elFocus) == 'undefined' )
				{
					elFocus=jQuery('input[name=phone]');
				}
			}
			if( jQuery('textarea[name=message]').val() === '' )
			{
				errorMessage.push("Please enter message before sending");
				if( typeof(elFocus) == 'undefined' )
				{
					elFocus=jQuery('textaea[name=message]');
				}
			}
			if( errorMessage.length > 0 )
			{
				jQuery('body').showMessage({thisMessage:errorMessage,className:'fail','displayNavigation':false});
				elFocus.focus();
				return false;
			}
			else
			{
				jQuery.get('/returnForm.php', formData, function(xml) {
						$(xml).find('response').each( function() {
								var error = $(this).find('error').text();
								var returnMessage = $(this).find('returnMessage').text();
								if( error == "false")
								{
									var message = ['<img src="/images/accept.png" style="width:16px;height:16px;margin-left:-24px;" alt="accept"/>' + returnMessage];
									jQuery('body').showMessage({'thisMessage':message,'className':'success','displayNavigation':false});
									jQuery('input[type=submit]').attr('disabled', true);
								}
								else
								{
									var message = ['<img src="/images/exclamation.png" style="width:16px;height:16px;margin-left:-24px;" alt="fail"/>' + returnMessage];
									jQuery('body').showMessage({'thisMessage':message,'className':'fail','displayNavigation':false});
								}
						});
				});
				return false;
			}
		});
		jQuery('input[id=success]').click(function() {
			jQuery('body').showMessage({'thisMessage':['This is a sample successful message that will automatically close'],'className':'success','displayNavigation':false,autoClose:true});
			return false;
		});
		jQuery('input[id=failure]').click(function() {
			jQuery('body').showMessage({'thisMessage':['This is a sample of an error message that will automatically close (esc key will not work)'],className:'fail',displayNavigation:false,useEsc:false,autoClose:true});
			return false;
		});
		jQuery('input[id=bottom]').click(function() {
			jQuery('body').showMessage({thisMessage:['This is a sample of a message that appears at bottom and automatically close.'],position:'bottom',displayNavigation:false,autoClose:true,className:'notificationBottom'});
			return false;
		});
		jQuery('input[id=notification]').click(function() {
			jQuery('body').showMessage({thisMessage:['This is generic message one','This is generic message two','This is generic message three'],closeText:'close me',escText:'esc key or'});
			return false;
		});
	});
	//]]>
	</script>
	<div id="google">
		<script type="text/javascript">
		//<![CDATA[
		google_ad_client = "pub-8997834926895804";
		/* 728x90, showMessage, top */
		google_ad_slot = "4520252339";
		google_ad_width = 728;
		google_ad_height = 90;
		//]]>
		</script>
		<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
	</div>
	<div id="wrapper">
		<div class="header">showMessage jQuery Plugin</div>
		<p>A first attempt at a jQuery Plugin. This was inspired by a similar effect you can see on the Twitter.com site. Some of the advantages:</p>
		<ul>
			<li>Notification toolbar displayed at the top of page (no scrolling to view error)</li>
			<li>Multiple messages can be displayed in notification bar</li>
			<li>Options to automatically close the notification bar after set delay</li>
			<li>Notification bar closes with blur/'esc' key/'close' link</li>
		</ul>
		<ul>
			<li><a href="#download" title="Install">Download</a></li>
			<li><a href="#install" title="Install">Install</a></li>
			<li><a href="#options" title="Options">Options</a></li>
			<li><a href="#examples" title="Examples">Examples</a></li>
		</ul>
		<div id="download">
			<h2>Download</h2>
			<p>Download the jQuery file at <a href="http://showMessage.dingobytes.com/download/" title="download">http://showMessage.dingobytes.com/download/</a></p>
		</div>
		<div id="install">
			<h2>Install</h2>
			<p>
				You can install showMessage jQuery Plugin by including the script somewhere in the page AFTER jQuery. This plugin should work on jQuery version 1.3.2+.
			</p>
			<pre>
&lt;script type=&quot;text/javascript&quot; src=&quot;/path/to/jquery.showMessage.min.js&quot;<br/>charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
			</pre>	
			<p>
				If you wish to style the text, the responses are displayed through an unordered list in the div with id attribute showMessage. Further more you can apply the class of your choice to the notificatio toolbar.
			</p>
			<pre>
.notification
{
	font-family: Arial, Helvetica, clean, sans-serif;
	font-size: large;
	font-weight: bold;
	background-color: rgb(247, 247, 247);
	color: red;
}
.success
{
	font-family: Arial, Helvetica, clean, sans-serif;
	font-size: large;
	font-weight: bold;
	background-color: #acfa58;
	color: black;
}
.fail
{
	font-family: Arial, Helvetica, clean, sans-serif;
	font-size: large;
	font-weight: bold;
	background-color: #fe2e2e;
	color: white;
}
			</pre>
		</div>
		
		<div id="options">
			<h2>Options</h2>
			<p>Here are the possible options with their default values:</p>
			<pre>
	thisMessage:		[''],
	className:		'notification',
	position:		'top',
	zIndex:			1001,
	opacity:		90,
	useEsc:			true,
	displayNavigation:	true,
	autoClose:		false,
	delayTime:		5000,
	closeText:		'close',
	escText:		'Esc Key or'
			</pre>
			<dl>
				<dt>thisMessage <em>(required)</em><span class="right">[array]</span></dt>
				<dd>The message you will be returning to the page. The message is in the form of an array.</dd>
				
				<dt>className<span class="right">[string]</span></dt>
				<dd>Default set to 'notification'. Customize the style for the notification bar here.</dd>
				
				<dt>position<span class="right">[string]</span></dt>
				<dd>Default set to 'top'. Position of the notification bar. Value can be either 'top' or 'bottom' only.</dd>
				
				<dt>zIndex<span class="right">[integer]</span></dt>
				<dd>Default set to 1001. z-index of the notification bar. Value is an integer greater then one.</dd>
				
				<dt>opacity<span class="right">[integer]</span></dt>
				<dd>Default set to 90. Opacity of the notification bar. Value is an integer between 1 and 100.</dd>
				
				<dt>useEsc<span class="right">[boolean]</span></dt>
				<dd>Default set to true. Will bind the 'Esc' keydown event to window to close the notificaton bar.</dd>
				
				<dt>displayNavigation<span class="right">[boolean]</span></dt>
				<dd>Default set to true. Will display the navigation close text information in upper right.</dd>
				
				<dt>autoClose<span class="right">[boolean]</span></dt>
				<dd>Default is set to false. When set to true, it will close the notification bar after specified delay time.</dd>
				
				<dt>delayTime<span class="right">[integer]</span></dt>
				<dd>Default is set to 5000. Amount of time in milli-seconds before the notification bar will close/hide (autoClose must be set to true).</dd>
				
				<dt>closeText<span class="right">[string]</span></dt>
				<dd>Default is set to 'close'. Text that you want the notification to display in upper right to close window.</dd>
				
				<dt>escText<span class="right">[string]</span></dt>
				<dd>Default is set to 'Esc Key or'. Text that you want the notification to display in upper right to close window with 'Esc' key.</dd>
			</dl>
		</div>
		
		<div id="examples">
			<h2>Example</h2>
			<dl>
				<dt>Simple</dt>
				<dd>
					Just return a simple message to notification bar.
					<pre>
jQuery('body').showMessage({
	'thisMessage':['&lt;mg src="/images/accept.png" alt="accept"/&gt;successful!']
});
					</pre>
				</dd>
				
				<dt>Advanced</dt>
				<dd>
					This should look a lot like Twitter.
					<pre>
var returnMessage = ['Account was created successfully!','Thank you.'];<br/>
jQuery('body').showMessage({<br/>
		'thisMessage':		returnMessage,
		'className':		'success',
		'opacity':		95,
		'displayNavigation':	false,
		'autoClose':		true,
		'delayTime':		6000<br />
});
					</pre>
				</dd>
			</dl>
		</div>
		<div id="exampleBox" class="roundedcornr_box">
			<div class="roundedcornr_top"><div></div></div>
			<div class="roundedcornr_content clearFix">
				<div class="header">showMessage jQuery Plugin</div>
				<form id="contactForm" action="returnForm.njs.php" method="get">
					<dl>
						<dt><label for="fullName">Full Name:</label><em>*</em></dt>
						<dd><input type="text" id="fullName" name="fullName" tabindex="1"/></dd>
						
						<dt><label for="email">Email:</label></dt>
						<dd><input type="text" id="email" name="email" tabindex="2"/></dd>
						
						<dt><label for="phone">Phone:</label></dt>
						<dd><input type="text" id="phone" name="phone" tabindex="3"/></dd>
						
						<dt><label for="message">Message:</label><em>*</em></dt>
						<dd><textarea id="message" name="message" rows="6" cols="30" tabindex="4"></textarea></dd>
						
						<dt></dt>
						<dd><input type="submit" id="submitForm" tabindex="5" value="Submit Form"/></dd>
						
					</dl>
					<div>
						<input type="button" id="success" value="Test Success Message"/>
						<input type="button" id="failure" value="Test Error Message"/>
						<input type="button" id="bottom" value="Test BottomMessage"/>
						<input type="button" id="notification" value="Test Simple Notification"/>
					</div>
				</form>
			</div>
			<div class="roundedcornr_bottom"><div></div></div>
		</div>
	</div>
	<div id="footer">
		<p>&copy; 2010 <a href="http://www.albawebstudio.com" title="Alba Web Studio">Alba Web Studio</a> | <a href="http://www.dingobytes.com" title="What your nephew can't make you">Dingobytes.com</a></p><a href="http://jquery.com" title="jQuery- write less, do more" id="jQueryLogo"><img src="images/jQuery_logo_color_ondark.png" alt="write less, do more"/></a>
	</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1919768-24");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
